<script setup>
var oScript= document.createElement("link");
oScript.rel="stylesheet"
oScript.href="//unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css";
document.querySelector('body').appendChild( oScript);


var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="//unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js";
document.querySelector('body').appendChild( oScript);
oScript.onload = function (){
    let player = new Player({
      id: 'mse',
      autoplay: true,
      volume: 0.3,
      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
      poster: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg",
      playsinline: true,
      thumbnail: {
        pic_num: 44,
        width: 160,
        height: 90,
        col: 10,
        row: 10,
        urls: ['//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-thumbnail.jpg'],
      },
      danmu: {
        comments: [
          {
            duration: 15000,
            id: '1',
            start: 3000,
            txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
            style: { //弹幕自定义样式
              color: '#ff9500',
              fontSize: '20px',
              border: 'solid 1px #ff9500',
              borderRadius: '50px',
              padding: '5px 11px',
              backgroundColor: 'rgba(255, 255, 255, 0.1)'
            }
          }
        ],
        area: {
          start: 0,
          end: 1
        }
      },
      height: window.innerHeight,
      width: window.innerWidth,
    });
    player.emit('resourceReady', [{ name: '超清', definition: '1080p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' }, { name: '高清', definition: '720p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4' }, { name: '标清', definition: '480p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' }]);

}
</script>
<template>
    <div class="video">
        <div id="mse"></div>
    </div>
</template>
<style>
</style>
  